<template>
  <div style="padding: 30px">
    <Breadcrumb />
    <el-card class="box-card">
      <div class="text item">
        <div style="margin-top: 15px">
          <el-input
            v-model="input"
            :clearable="true"
            placeholder="请输入内容"
            class="input-with-select"
            @clear="empty"
          >
            <el-button slot="append" icon="el-icon-search" @click="querys" />
          </el-input>
          <el-button type="primary" class="addUser" @click="dialogVisible = true">添加用户</el-button>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="#" width="40" />
            <el-table-column prop="username" label="姓名" width="166" />
            <el-table-column prop="email" label="邮箱" width="166" />
            <el-table-column prop="mobile" label="电话" width="166" />
            <el-table-column prop="role_name" label="角色" width="166" />
            <el-table-column prop="mg_state" label="状态" width="166">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.mg_state"
                  active-color="#409EFF"
                  inactive-color="#CCC"
                  @change="onChange(scope.row)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="166">
              <template slot-scope="scope">
                <el-row class="btns">
                  <el-button icon="el-icon-edit" type="primary" @click="editUserInfo(scope.row)" />
                  <el-button icon="el-icon-delete" type="danger" @click="deleteUser(scope.row)" />
                  <el-tooltip content="分配角色" placement="top">
                    <el-button icon="el-icon-setting" type="warning" @click="allotRole(scope.row)" />
                  </el-tooltip>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              v-model="currentPage"
              :page-sizes="[2, 4, 8, 10]"
              :page-size="2"
              layout="total, sizes, prev, pager, next, jumper"
              :total="userInfo.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div></div></el-card>
    <!-- 点击添加用户弹框 -->
    <add-dialog v-model="dialogVisible" :table-data="tableData" @loadUser="loadUser" />
    <!-- 用户编辑弹框 -->
    <edit-dialog ref="edit" v-model="editShow" @loadUser="loadUser" />
    <!-- 分配角色弹框 -->
    <allot-role v-model="roleShow" :role="role" @loadUser="loadUser" />
  </div>
</template>

<script>
import { getUserInfo, editUserState, deleteUser } from '@/api/user.js'
import AddDialog from '../components/AddDialog'
import EditDialog from '../components/EditDialog.vue'
import AllotRole from '../components/AllotRole.vue'

export default {
  name: 'User',
  components: {
    AddDialog,
    EditDialog,
    AllotRole
  },
  data() {
    return {
      roleShow: false,
      editShow: false,
      dialogVisible: false,
      input: '',
      tableData: [],
      currentPage: 1,
      pagesize: 2,
      userInfo: {},
      index: 1,
      query: '',
      role: {}
    }
  },

  created() {
    this.loadUserInfo()
  },

  methods: {
    // 获取管理信息
    async loadUserInfo() {
      const res = await getUserInfo({
        query: this.query,
        pagenum: this.currentPage,
        pagesize: this.pagesize
      })
      console.log(res)
      this.userInfo = res
      this.tableData = res.users
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.loadUserInfo()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.loadUserInfo()
    },
    // 状态发生变化
    async onChange(data) {
      try {
        await editUserState(data.id, data.mg_state)
        this.loadUserInfo()
        this.$message.success('修改成功')
      } catch (err) {
        console.log(err)
      }
    },
    // 筛选
    querys() {
      this.query = this.input
      this.loadUserInfo()
    },
    loadUser() {
      this.loadUserInfo()
    },
    // 修改用户信息
    editUserInfo(data) {
      this.editShow = true
      this.$refs.edit.editUser(data.id)
    },
    // 删除用户
    deleteUser(data) {
      console.log(data)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        try {
          await deleteUser(data.id)
          this.loadUserInfo()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } catch (err) {
          console.log(err)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分配角色
    allotRole(data) {
      this.roleShow = true
      this.role = data
    },
    empty() {
      this.query = ''
      this.loadUserInfo()
    }
  }
}
</script>

<style scoped lang="scss">
.el-card {
  margin-top: 15px;
  .el-input {
    width: 33%;
    .el-input__inner {
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 50px;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      .el-input__suffix {
        background-color: #f5f7fa;
        color: #909399;
        vertical-align: middle;
        display: table-cell;
        position: relative;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        padding: 0 20px;
        width: 1px;
        white-space: nowrap;
      }
    }
  }
  .addUser {
    margin-left: 30px;
  }
  .el-table {
    // padding: 0 20px;
    margin-top: 20px;
  }
  .btns {
    display: flex;
    .el-button {
      width: 44px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
